﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MooTools IdleTimer</title>
	<link rel="stylesheet" href="idletimer_style.css" type="text/css" media="screen"/>
	<link rel="stylesheet" href="idletimer.css" type="text/css" media="screen"/>
</head>
<body>

<div id="logoutHeader" class="hidden">
	<div class="wrapper " id="inactivity">
		You have been inactive for a while and will be logged out in <span id="logoutTime">30</span> seconds.<br>
		To prevent a logout, move your mouse or press any key on your keyboard.
	</div>
	<div class="wrapper hidden" id="doLogout">
		Obviously, had this been a site that actually required you to log in,
		we could have done a document.location redirect now and logged you out. Smooth, eh?
	</div>
</div>

<div id="wrapper" class="narrow clearfix">
	<a name="top"></a>

	<div id="header" class="clearfix">
		
		<div id="pagecontrols">
			<a href="http://rexxars.com/project/idletimer/#" title="Toggle font size" class="fontSize"><em>Toggle font size</em></a>
			<a href="http://rexxars.com/project/idletimer/#" title="Toggle page width" class="pageWidth"><em>Toggle page width</em></a>

		</div>
	
		<img src="./MooTools IdleTimer - Rexxars.com_files/dot.png" alt="Dot" id="theDot" style="top: 34px; ">
		<h1 id="logo"><a href="http://rexxars.com/"><em>Rexxars.com</em></a></h1>
		<div id="blogDescription">A developers perspective on PHP, Android, MooTools and other awesomeness.</div>
		
		<div id="navigation">
			<a href="http://rexxars.com/" class="blog"><em>Blog</em></a>
			<a href="http://rexxars.com/projects/" class="projects"><em>Projects</em></a>

			<a href="http://rexxars.com/about/" class="about"><em>About</em></a>
			<a href="http://rexxars.com/contact/" class="contact"><em>Contact</em></a>
		</div>
	
	</div>
	
	<div id="content" class="idletimer">
	
		<h1>Mootools IdleTimer</h1>
		<h2>by <a href="http://rexxars.com/">Espen 'Rexxars' Hovlandsdal</a></h2>
		
		<h3>IdleTimer?</h3>
		<p>
			This plugin aims to determine when the user is idle (not interacting with the page) so that you can respond appropriately.
			It is inspired by Nick Zakas' <a href="http://www.nczonline.net/blog/2009/06/02/detecting-if-the-user-is-idle-with-javascript-and-yui-3/">YUI version</a> and Paul Irish's <a href="http://paulirish.com/2009/jquery-idletimer-plugin/">jQuery version</a>.
		</p>
		
		<h3>When is this useful?</h3>
		<ul>
			<li>If you want to log the user out of a system after a given amount of idle time.</li>
			<li>If you want to hide or dim page elements when the user is watching a video.</li>
			<li>If you want insanely detailed stats and report how much idle/active time a user has while on your site.</li>
		</ul>
		
		<h2>Demo</h2>
		<p>The "idle time" on the boxes below is concidered 5 seconds and is affected by<br> mouse movement, keyboard input, mousewheel and mouse button press.</p>
		<p>The box to the left conciders the user to be idle after 5 seconds, while the middle box is only triggered after 30 seconds of inactivity has passed. The right box is only triggered by mouse events over that exact box, and conciders the user idle after 10 seconds of inactivity.</p>
		<p>After 30 seconds of inactivity, a bar will appear on the top of the page, showing a common usage scenario for this class.</p>
		<div id="demo">
			
			<div class="container">
				Idle status (5s):
				<div class="box " id="box5s">
					<span id="statusText5s">Active!</span><br>
					<span id="idleTime5s">687 ms</span>
				</div>
			</div>
			
			<div class="container">
				Idle status (30s):
				<div class="box " id="box30s">
					<span id="statusText30s">Active!</span><br>
					<span id="idleTime30s">687 ms</span>
				</div>
			</div>
			
			<div class="container">
				Separate (10s)
				<div class="box idle" id="special">
					<span id="specialStatus">Idle!</span><br>
					<span id="specialTime">950714 ms</span>
				</div>
			</div>
			
		</div>
		
		<h2>Documentation</h2>
		<p>
			See <a href="http://github.com/rexxars/IdleTimer/blob/master/Docs/IdleTimer.md">http://github.com/rexxars/IdleTimer/blob/master/Docs/IdleTimer.md</a>
		</p>
		
		<h2>Download</h2>
		<p>
			IdleTimer is available for download through the <a href="http://mootools.net/forge/p/idletimer">MooTools Forge</a> and <a href="http://github.com/rexxars/IdleTimer">Github</a>.
		</p>
		
	</div>

</div>

<div id="footer">
	<a href="http://rexxars.com/project/idletimer/#top" class="toTop">^</a>	
	<a class="rss" href="http://rexxars.com/feed/">Entries (RSS)</a>
	<br>
	© Espen Hovlandsdal
</div>

	<script type="text/javascript" charset="utf-8" src="../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../src/'; </script>
	<script type="text/javascript" charset="utf-8" src="../../src/demo/action/util/idletimer.js"></script>
</body>
</html>
